export default {
  name: "resizeDrag",
  bind(el, bind) {
    let domPosition = bind.arg || "right"; // 拖拽的位置 [left right top bottom]
    let direction = ["left", "right"].indexOf(domPosition) > -1 ? "vertical" : "horizontal"; // 水平垂直
    let callBack = bind.value;
    let dragDirectiveDom = document.createElement("div");
    dragDirectiveDom.className = "dragDirectiveDom";
    dragDirectiveDom.style.cssText = `position: absolute;z-index: 9;`;
    if (direction === "vertical") {
      dragDirectiveDom.style.cssText += `cursor: ew-resize;width: 10px;height: 100%;top: 0px;`;
      if (domPosition === "left") {
        dragDirectiveDom.style.left = "0";
      } else {
        dragDirectiveDom.style.right = "0";
      }
    } else {
      dragDirectiveDom.style.cssText += `cursor: n-resize;height: 10px;width: 100%;left: 0px;`;
      if (domPosition === "top") {
        dragDirectiveDom.style.top = "0";
      } else {
        dragDirectiveDom.style.bottom = "0";
      }
    }

    el.appendChild(dragDirectiveDom);
    setTimeout(() => {
      let elPosition = el.style.position || getComputedStyle(el)["position"];
      if (!elPosition || elPosition === "static") {
        el.style.position = "relative";
      }
    });
    let isResizing = false;
    el.addEventListener("mousedown", e => {
      el.style.userSelect = "none";
      let defaultSize = null;
      let defaultPageNumber = null;
      if (direction === "vertical") {
        defaultSize = el.clientWidth;
        defaultPageNumber = e.pageX;
      } else {
        defaultSize = el.clientHeight;
        defaultPageNumber = e.pageY;
      }


      if (e.target === dragDirectiveDom) {
        isResizing = true;
        let resize = function (initialSize, offset = 0) {
          if (direction === "vertical") {
            let paneWidth;
            if (domPosition === "left") {
              paneWidth = initialSize - offset;
            } else {
              paneWidth = initialSize + offset;
            }
            if (callBack && typeof callBack === "function") {
              callBack(paneWidth);
            } else {
              el.style.width = paneWidth + "px";
            }
          } else {
            let paneHeight;
            if (domPosition === "top") {
              paneHeight = initialSize - offset;
            } else {
              paneHeight = initialSize + offset;
            }
            if (callBack && typeof callBack === "function") {
              callBack(paneHeight);
            } else {
              el.style.height = paneHeight + "px";
            }
          }

        };
        resize(defaultSize);
        let onMouseMove = function (ref) {
          let pageNumber = direction === "vertical" ? ref.pageX : ref.pageY;
          let clientNumber = direction === "vertical" ? document.documentElement.clientWidth : document.documentElement.clientHeight;
          pageNumber = pageNumber > clientNumber ? clientNumber : pageNumber
          resize(defaultSize, pageNumber - defaultPageNumber);
        };
        let onMouseUp = function () {
          el.style.userSelect = "auto";
          resize(direction === "vertical" ? el.clientWidth : el.clientHeight);
          isResizing = false;
          window.removeEventListener("mousemove", onMouseMove);
          window.removeEventListener("mouseup", onMouseUp);
        };
        window.addEventListener("mousemove", onMouseMove);
        window.addEventListener("mouseup", onMouseUp);
      }
    });
  },
  unbind(el) {
    el.removeEventListener("mousedown", () => {});
  }
};